<template>
    <div class="home-wrap" :class="{homeBG:isMobile}" style="height: 100%">
        <div class="header">
            <div class="user-info">
								<div class="flex imgFlex">
										<img  src="@/assets/image/mainLogo.png" alt="" style="width: 9rem;height: 2.4rem">
								</div>
								<div class="flex">
									 <div class="profile-wrap">
									                  <van-image
									                    class="profile-img"
									                    :src="photoUrl"
									                    round
									                >
									                </van-image>
									                </div>
									                <div class="info-detail">
									                  <div class="info-wrap">
									                     <img src="../../assets/image/Shape.png" alt="">
									                     <span>{{userInfo.name}}</span>
									                  </div>
									                  <div class="info-wrap">
									                     <img src="../../assets/image/number.png" style="width: 16px" alt="">
									                     <span>{{userInfo.deptName}}</span>
									                  </div>
									                  <div class="info-wrap">
									                     <img src="../../assets/image/bumen.png" alt="">
									                     <span>{{userInfo.postName}} <span style="margin-left: 0.01rem" v-if="userInfo.postRank != ''">({{userInfo.postRank}})</span> </span>
									                  </div>
									                    <div class="infoContent">
									                        <ul class="multirecord">
									                            <li v-if="userInfo.identifyLabel !=''">
									                                <img src="@/assets/images/platform/dangwei.png" alt="">
									                                <span>{{userInfo.identifyLabel}}</span>
									                            </li>
									                            <li v-if="userInfo.duty != ''">
									                                <img src="@/assets/images/platform/tuan.png" alt="">
									                                <span>{{userInfo.duty}}</span>
									                            </li>
									                          <!--  <li  v-if="userInfo.postRank != ''">
									                               &lt;!&ndash; <img src="@/assets/images/platform/dangjian.png" alt=""> &ndash;&gt;
									                                <span>{{userInfo.postRank}}</span>
									                            </li>-->
<!-- 									                            <li v-if="userInfo.isJW == true">
									                                <img src="@/assets/images/platform/jiwei.png" alt="">
									                                <span>纪委</span>
									                            </li>
									                            <li v-if="userInfo.isDZB == true">
									                                <img src="@/assets/images/platform/dang.png" alt="">
									                                <span>党支部</span>
									                            </li>
									                            <li v-if="userInfo.isTW == true">
									                                <img src="@/assets/images/platform/tuan.png" alt="">
									                                <span>团总支</span>
									                            </li>
									                            <li v-if="userInfo.isGH == true">
									                                <img src="@/assets/images/platform/dangyuanhuodong.png" alt="">
									                                <span>工会委员</span>
									                            </li>
									                            <li v-if="userInfo.isLD == true">
									                                <img src="@/assets/images/platform/lingdao.png" alt="">
									                                <span>领导</span>
									                            </li>
									                            <li v-if="userInfo.isZC == true">
									                                <img src="@/assets/images/platform/zhongceng.png" alt="">
									                                <span>中层</span>
									                            </li> -->
									                        </ul>
									                    </div>
									
									                </div>
									           
								</div>
               
						</div>

        </div>

        <section class="home-content">
            <!-- home-content -->
            <section name="fade">
                <!-- 首页 -->
                <section v-if="categoryType === 1">
                    <div class="flex menuContain flex-warp" :class="{baiBg:!isMobile}" style="align-content: baseline;">
                        <menu-item
                            v-for="(menuData, key) in menuDatas"
                            :key="key"
                            :img-src="menuData.imgSrc"
                            :link-url="menuData.linkUrl"
                            :menu-title="menuData.menuTitle"
                            :bcImgSrc="menuData.bcImgSrc"
                        >
                        </menu-item>
                        <img v-if="isMobile == false" class="bgImgMargin" src="@/assets/image/indexBg.png" style="width: 100%;margin-top: -2.6rem;">
                    </div>
                </section>
            </section>
        </section>
    </div>
</template>

<script>

	import headTop from '@/components/header/head'
	import menuItem from '@/components/menuItem/menuItem'
	import shadowItem from '@/components/shadow/shadow'
	import userInfo from '@/components/userInfo/userInfo'
	import {setStore,getStore,getDefault,contextRoot} from '@/assets/config/mUtils';
	import {mapState, mapMutations} from 'vuex'
	import {login,sysTime,getUser,dataOfTime,getCodeSetData,getMenu,getUserBaseInfo} from '@/service/getData';
	import { Dialog,Toast } from 'vant';

export default {
    data() {
        return {
	        profiletitle: '首页',
	        categoryType:1, //首页与我的切换
	        festivalImg:'',
	        signShow:0, //点击打卡按钮，0隐藏，1显示
	        ifThApp:false,
	        enterDay:"",//入职天数
	        thisTime:"",
	        name:"",//名字
	        post:"",//
	        dept:"",//
	        photoUrl:'',
	        userInfo:'',
	        isMobile:true,
            menuDatas: [
               /* {
                    imgSrc: require("@/assets/image/icon_1@2x.png"),
//                    bcImgSrc: require("@/assets/image/Rectangle.png"),
	                menuTitle:'我的待办',
	                linkUrl:'/backlog',
                },*/
                {
                    imgSrc: require("@/assets/image/icon_2@2x.png"),
//                    bcImgSrc: require("@/assets/image/Rectangle1.png"),
	                menuTitle:'个人信息',
	                linkUrl:'/myInfo',
                },
	            {
		            imgSrc: require("@/assets/image/icon_3@2x.png"),
//		            bcImgSrc: require("@/assets/image/Rectangle8.png"),
		            menuTitle:'我的荣誉',
		            linkUrl:'/myHoner',
	            },
                {
                    imgSrc: require("@/assets/image/icon_4@2x.png"),
//                    bcImgSrc: require("@/assets/image/Rectangle2.png"),
	                menuTitle:'事项办理',
	                linkUrl:'/handlMatter'
                },
                {
	                imgSrc: require("@/assets/image/icon_5@2x.png"),
//                    bcImgSrc: require("@/assets/image/Rectangle5.png"),
	                menuTitle:'工资条查询',
	                linkUrl:'/salary'
                },
                {
                    imgSrc: require("@/assets/image/icon_6@2x.png"),
//                    bcImgSrc: require("@/assets/image/Rectangle4.png"),
	                menuTitle:'我的申请',
	                linkUrl:'/process'
                },
// 	            {
// 		            imgSrc: require("@/assets/image/target.png"),
// 		            bcImgSrc: require("@/assets/image/Rectangle.png"),
// 		            menuTitle:'目标管理',
// 		            linkUrl:'/targetManage'
// 	            },
//                 {
// 	                imgSrc: require("@/assets/image/xinxi.png"),
//                     bcImgSrc: require("@/assets/image/Rectangle6.png"),
// 	                menuTitle:'我的消息',
// 	                linkUrl:'/message'
//                 },
	            {
		            imgSrc: require("@/assets/image/icon_7@2x.png"),
//		            bcImgSrc: require("@/assets/image/Rectangle9.png"),
		            menuTitle:'提醒查询',
		            linkUrl:'/remind'
	            },
//                 {
// 	                imgSrc: require("@/assets/image/huzhao.png"),
//                     bcImgSrc: require("@/assets/image/Rectangle8.png"),
// 	                menuTitle:'绩效考评',
// 	                linkUrl:'/evaluateAssess'
//                 },
// 
//                 {
//                     imgSrc: require("@/assets/image/jurassic_log.png"),
//                     bcImgSrc: require("@/assets/image/Rectangle7.png"),
// 	                menuTitle:'胜任力考评',
// 	                linkUrl:'/competencyAssess'
//                 },
            ],
        };
    },
	components:{
		headTop,
		menuItem,
		shadowItem,
		userInfo
	},
	computed: {
		...mapState(["user_id"])
	},

	created(){
//		 setStore('user_id','76be0e1d370a11ebac6db05cdad8332c');
//		 setStore('user_id','67C078477271419DBE21C52C3E27BF4A');
      // var userId = window.location.href.split('?')[1].split('#')[0].slice(11);
//      var userId = '97357dea832042c98739c2f3b82342ad';//测试5
//		var userId = '131ed7a43ab94a558bd3be85bd1a2d74';//领导
//		var userId = '36fcb1d6f60348c8b912d9a762b39ee3';
		

		var interfaceUrl = contextRoot();
		var checkTime = new Date().getTime().toString();
		//判断是否是pc企业微信
		var userAgent = navigator.userAgent;
		console.log(userAgent.includes('Mobile'));
		if(userAgent.includes('wxwork') && !userAgent.includes('Mobile')){
			this.isMobile = false;
        }

//		if(!userAgent.includes('Mobile')){
//			this.isMobile = false;
//		}

		var data = getDefault();
		getMenu(data).then(res=>{
			console.log(res);
			var data = res.data;		
			console.log(this.photoUrl);
			if(data =="00901"){
				this.menuDatas.push({
                    imgSrc: require("@/assets/image/icon_8@2x.png"),
					menuTitle:'经理自助',
					linkUrl:'/selfManageList'
				})
			};
// 			if(data.isLD =="00901"){
// 				this.menuDatas.push({
// 					imgSrc:require('@/assets/images/icon/lingdai.png'),
// 					bcImgSrc: require("@/assets/image/Rectangle1.png"),
// 					menuTitle:'总经理自助',
// 					linkUrl:'/generalSelfManage'
// 				})
// 			}
		});
		getUserBaseInfo(data).then(res => {
			console.log(res,"个人信息");
			this.userInfo = res.data.person;
			if(this.userInfo.photo == ''){
							if(this.userInfo.sex=='男'){
								this.photoUrl = require('@/assets/images/img/man_moren.png');
			                }else {
								this.photoUrl = require('@/assets/images/img/girl_moren.png');
			                }
			
			            }else {
							this.photoUrl = interfaceUrl+ '/api/file/att/download?fileId='+(this.userInfo.photo.base64Encode())+'&app_userId='+getStore('user_id')+'&CHECK_TIME='+ checkTime+'&CHECK_SIGN='+ this.$md5(getStore('user_id') + checkTime + "3a28fba00c015e0df7f88556c91cb7fc");
			            }
		});
		/*请求所有项目所用代码集*/
		this.SELECTPER({});
		this.SAVE_PLANID('');
		getCodeSetData({}).then(res => {
			console.log(res,"code数据");
			var result = res.data;
			this.CODESET(result);
			setStore('codeSet',result)
		})
	},
	mounted(){
		/* login().then(res=>{
           var userId = res.data.userId;
           console.log(res);
           setStore('user_id',userId);
           this.SAVE_USERID(userId);
         })*/

		// alert(this['user_id'])  //获取state里面的user_id
		//console.log(document.body);
	},
	methods:{
		...mapMutations([
			'SAVE_USERID',
			'CODESET',
			'SELECTPER',
			'SAVE_PLANID'
		]),
		changeCategory(index,title){
			this.categoryType = index;
			this.profiletitle = title;
		},

		signClose(){
			this.signShow = 0;
		},

	}
};
</script>
<style lang="scss" scoped>
@import "../../assets/style/mixin";
@import "../../assets/style/public";
.content {
    // padding: $px_12;
    // padding-top: calc(64px + 0.4rem);


}

.home-wrap {
  /*height: 100%;*/
   /* background: #fff;*/

    .home-content {
        /*padding: 12px;*/
        padding-top: 0.3rem;
       /* height:  calc(100% - 8.45rem);*/
        /*background: #fff;*/

    }
}
.homeBG{
	background:#fff;
//     background:url("../../assets/image/indexBg.png") no-repeat bottom #fff;
//     background-size: 100%;
}
.baiBg{
    background: #fff;
}
.header {
    position: relative;
    background: url("../../assets/image/headimage.png") no-repeat;
    background-size: 100%;
    width: 100%;
    //  height: 400px;
    padding-top: 1.4rem;
    .back-img {
        top: 0;
        position: absolute;
        width: 100%;
        // background: url('../../assets/image/headimage.png')  no-repeat;
        // background-size:100%;
        height: 90.5px;
        background: orange;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .user-info {
        // height: 8.6rem;
        /*margin-left: 1rem;*/
        /*margin-right: 1rem;*/
        background: #ffffff;
        box-shadow: 0 4px 5px 0 #ebebeb;
        border-radius: 6px;
        padding: 0.5rem;
        display: flex;
				
        flex-direction: column;
        align-items: center;
        margin:0 1rem 0.1rem 1rem;
        .profile-wrap {
          flex: 0 0 4.5rem;

            .profile-img {
            width: 4.23rem;
            height: 4.5rem;
        }
				
        }
      .flex{
      	width: 100%;
      }
			.imgFlex{
				justify-content: center;
				padding-bottom: 0.6rem;
			}
        .info-detail {
            margin-left: 0.6rem;
						display: flex;
					  flex-direction: column;
					  justify-content: space-around;
            >div:nth-child(2) {
                margin-top: 0.2rem;
                margin-bottom: 0.2rem;
            }
            .info-wrap {
              display: flex;
              align-items: center;
            
               span {
                margin-left: 0.8rem;
                font-size: 0.6rem;
                font-weight: 500;
                line-height: 1rem;
                color: #333333;
               }
               


            }

        }

        // .user-info-wrap {
        //  width: 100%;
        // height: 100px;
        // margin-left: 16px;
        // margin-right: 16px;
        // background: yellowgreen;
        // }

        // top: 100px;
    }
}

.shadowItem,
.signContain {
    display: none;
}
.shadowItem.show,
.signContain.show {
    display: block;
}

.menuContain {
    /*padding-bottom: 2.8rem;*/
    padding: 1rem 1rem 0;
  /*  height: calc(100% - 1rem);
    .bgImgMargin{
        margin-top: -4.1rem;
    }
    .hMargin{
        margin-top: -1rem;
    }*/
    > div {
        width: 25%;
        // @include wh(33.33%, 4.2rem);
       /* background: #fff;*/
        // margin-bottom: 8px;
        /* border-top:1px solid #e6e6e6;
              border-bottom:1px solid #e6e6e6;*/
        box-sizing: border-box;
        /*    margin-left: 1.2%;*/
    }
    > div:nth-of-type(4n + 0) {
        /*border-right:1px solid #e6e6e6;*/
    }
    > div:nth-of-type(4n + 1) {
        /* border-left:1px solid #e6e6e6;*/
    }
    > div:nth-last-of-type(1) {
        /*  border-right:1px solid #e6e6e6;*/
    }
}
.category_title {
    display: flex;
    position: fixed;
    left: 0;
    width: 100%;
    height: 2rem;
    bottom: 0;
    background-color: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(163, 163, 163, 0.25);
    justify-content: space-between;
    @include sc(0.4rem, #9babbb);
    padding: 0 1.44rem;
    box-sizing: border-box;
    > div.category {
        justify-content: center;
        width: 7rem;
        /*  align-items: center;*/
        display: flex;
        height: 100%;
        flex-direction: column;
        .icon {
            display: block;
            width: 0.88rem;
            height: 0.88rem;
            background: url("../../assets/images/img/home.png") no-repeat center
                center;
            background-size: 100%;
            margin-bottom: 0.1rem;
        }
        &.mine {
            align-items: flex-end;
            .icon {
                background: url("../../assets/images/img/my.png") no-repeat
                    center center;
                background-size: 0.68rem;
            }
        }
        &.choosed {
            .icon {
                background: url("../../assets/images/img/home1.png") no-repeat
                    center center;
                background-size: 100%;
            }
            @include sc(0.4rem, #5484ff);
            &.mine {
                .icon {
                    background: url("../../assets/images/img/my1.png") no-repeat
                        center center;
                    background-size: 0.68rem;
                }
            }
        }
    }
    .sign {
        position: relative;
        bottom: 1.1rem;
        > img {
            box-shadow: 0px 2px 12px 0px rgba(94, 142, 239, 0.53);
            border-radius: 50%;
            display: block;
        }
    }
}
.signContain {
    width: 100%;
    justify-content: center;
    flex-direction: column-reverse;
    align-items: center;
    position: fixed;
    left: 0;
    bottom: 0.1rem;
    z-index: 1000;
    > div {
        width: 2.2rem;
        img {
            display: block;
        }
    }
}
.sign1,
.sign2 {
    position: absolute;
    bottom: 0;
    left: calc(50% - 1.1rem);
    transition: 0.3s;
}
.sign2 {
    transition: 0.5s;
}
.signClose {
    position: absolute;
    bottom: 0;
    z-index: 1;
    left: calc(50% - 1.1rem);
}
.show {
    .sign1 {
        animation: moveup1 0.5s;
        animation-fill-mode: forwards;
        &::after {
            content: "签到";
            position: absolute;
            right: -1.5rem;
            bottom: 0.8rem;
            @include sc(0.5rem, #666);
        }
    }
    .sign2 {
        animation: moveup2 0.8s;
        animation-fill-mode: forwards;
        &::after {
            content: "签退";
            position: absolute;
            right: -1.5rem;
            bottom: 0.8rem;
            @include sc(0.5rem, #666);
        }
    }
}
@keyframes moveup1 {
    0% {
        bottom: 0;
    }
    100% {
        bottom: 2.3rem;
    }
}
@keyframes moveup2 {
    0% {
        bottom: 0;
    }
    100% {
        bottom: 4.6rem;
    }
}
#van-cell {
    margin-top: 7.4rem;
}
.van-cell .custom-text {
    color: #333;
    font-size: 0.6rem;
    margin-left: 1rem;
}
.head_goback {
    width: 0.6rem;
    height: 1rem;
    line-height: 2.2rem;
    margin-top: 0.4rem;
    padding: 0 3rem;
    margin-left: -3rem;
    position: fixed;
    left: 1rem;
    top: 0.4rem;
    z-index: 999;
}
.birth {
    position: absolute;
    width: 15.2rem;
    height: 22rem;
    left: 50%;
    top: 50%;
    z-index: 99999;
    margin-top: -11rem;
    margin-left: -7.6rem;
    .blessing {
        position: absolute;
        top: 8rem;
        width: 100%;
        left: 0;
        padding: 0 1rem;
        box-sizing: border-box;
        p {
            color: #ffffff;
            font-size: 0.7rem;
            line-height: 1.5;
            margin-bottom: 0.8rem;
        }
        .blessEnd {
            text-align: right;
        }
    }
    img {
        width: 100%;
    }
    span {
        position: absolute;
        top: 6px;
        right: -11px;
        width: 60px;
        height: 60px;
        background: url("../../assets/images/img/closeImg.png") no-repeat;
        background-size: 42px;
    }
}

// @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
//   .content {
//     padding: 0.4rem;
//     padding-top: calc(88px + 0.4rem);
//   }
//   .category_title {
//     bottom: 34px;
//   }
// }
// @media only screen and (device-width: 414px) and (device-height: 896px) {
//   .content {
//     padding: 0.4rem;
//     padding-top: calc(88px + 0.4rem);
//   }
//   .category_title {
//     bottom: 34px;
//   }
// }
.signCenter {
    left: 5rem;
}
.infoContent{

    font-size: .48rem;
    color: #717171;
    line-height: 0.8rem;
    ul{
        background: #fff;
        padding: 0.5rem 0 0.3rem;
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        li{
            padding-left: .9rem;
            .label{
                display: inline-block;
                width: 2.4rem;
                text-align: justify;
                text-align-last: justify;
                color: #4e4e4e;
            }
            div{
                padding-bottom: 1rem;
                p{
                    color: #555;
                    font-size: .56rem;
                    line-height: 1.12rem;
                    &.time{
                        color: #666;
                    }
                }
            }
        }
        &.multirecord{
            /*padding-left: 1.2rem;*/
            position: relative;
            display: flex;
            flex-direction: row;
            overflow: hidden;
            /*   &::after{
                   content: '';
                   position:absolute;
                   width: 2px;
                   height: 100%;
                   background: #eaefff;
                   top: 1rem;
                   left: 1.2rem;

               }*/
            li{
                position: relative;
                display: flex;
                flex-direction: column;
                /* width: 2rem;*/
                align-items: center;
                justify-content: center;
                padding-left: 0;
                /*flex-grow: 1;*/
                color: #C0C0C0;
                margin-right: 0.4rem;
                img{
                    height: 0.8rem;
                }
                /*&:before{
                    background-color: #cad9ff;
                    content: '';
                    display: inline-block;
                    width: .56rem;
                    height: .56rem;
                    position: absolute;
                    border-radius: 50%;
                    left: -.2rem;
                    z-index: 10;
                    top: .3rem;
                }
                &::after{
                    background-color: #83a5ff;
                    content: '';
                    display: inline-block;
                    width: .36rem;
                    height: .36rem;
                    position: absolute;
                    border-radius: 50%;
                    left: -.1rem;
                    z-index: 10;
                    top: .4rem;
                }*/
            }
        }
    }
}
</style>
